<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>系统公告列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote quoteBox">
	<form class="layui-form" method="post" id="searchFrm">
		<div class="layui-form-item" style="text-align: center;">
			<div class="layui-inline">
				<label class="layui-form-label">标题:</label>
				<div class="layui-input-inline">
					<input type="text" name="title"  placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">开始时间:</label>
				<div class="layui-input-inline">
					<input type="text" name="startDate" placeholder="请选择开始时间" id="startTime" readonly="readonly"  autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">结束时间:</label>
				<div class="layui-input-inline">
					<input type="text" name="endDate" placeholder="请选择结束时间" id="endTime" readonly="readonly"  autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<button type="button" class="layui-btn" id="doSearch"><span class='layui-icon'>&#xe615;</span>搜索</button>
				<button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
			</div>
		</div>
	</form>
</blockquote>
<table id="noticeTable" class="layui-table" lay-filter="noticeTable"></table>
<!--表头-->
<div id="noticeTableToolBar" style="display: none;">
	<a class="layui-btn layui-btn-sm ToolBar" rel="add" ><span class="layui-icon">&#xe61f;</span>发布</a>
	<a class="layui-btn layui-btn-sm layui-btn-danger ToolBar" rel="batchdel"><span class="layui-icon">&#xe640;</span>批量删除</a>
</div>
<!--操作-->
<div type="text/html" id="noticeTableRowBar"  style="display: none;">
	<a class="layui-btn layui-btn-xs" lay-event="update"><span class="layui-icon">&#xe642;</span>编辑</a>
	<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><span class="layui-icon">&#xe640;</span>删除</a>
	<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="view"><span class="layui-icon">&#xe60b;</span>查看</a>
</div>

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 3px" id="saveOrUpdateDiv">
	<form id="dataFrm" lay-filter="dataFrm" class="layui-form layui-form-pane">
		<div class="layui-form-item">
			<label class="layui-form-label">公告标题:</label>
			<div class="layui-input-block">
				<input type="hidden" name="id">
				<input type="hidden" class="subType">
				<input type="text"name="title" lay-verify="required" autocomplete="off" placeholder="请输入公告标题" class="layui-input formtitle">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">公告内容:</label>
			<div class="layui-input-block">
				<textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="content"></textarea>
			</div>
		</div>
		<div class="layui-form-item" style="text-align: center;">
			<button type="button" class="layui-btn" lay-filter="doSubmit" lay-submit=""><span class='layui-icon'>&#xe609;</span>提交</button>
			<button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
		</div>
	</form>
</div>
<!-- 添加和修改的弹出层结束 -->

<!-- 查看详情 开始-->
<div id="viewNoticeDiv" style="display: none;padding: 5px">
	<div>
		<h2 id="view_title" align="center"></h2>
	</div>
	<div style="float: right;">
		发布人:<span id="view_opername"></span>
		发布时间:<span id="view_createtime"></span>
	</div>
	<hr>
	<div id="view_content"></div>
</div>
<!-- 查看详情 结束-->

<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
	layui.use(['table','form','layer','laydate','jquery','layedit'],function(){
		var table=layui.table;
		var form=layui.form;
		var layer=layui.layer;
		var laydate=layui.laydate;
		var $=layui.jquery;
		var layedit=layui.layedit;

		//渲染时间选择器
		laydate.render({
			elem:'#startTime',
			type:'datetime'
		});
		laydate.render({
			elem:'#endTime',
			type:'datetime'
		});
		//创建一个编辑器
		var editIndex = layedit.build('content');
		//渲染数据表格
		var tableIns=table.render({
			elem: '#noticeTable'
			,url:'/notice/getNoticeList'
			,toolbar: '#noticeTableToolBar' //开启头部工具栏，并为其绑定左侧模板
			,defaultToolbar: ['filter', 'print']
			,title: '公告数据表'
			,height:'full-150'
			,cols: [ [
				{type: 'checkbox', fixed: 'left'}
				,{field:'id', title:'ID',align:'center', fixed: 'left', unresize: true, sort: true}
				,{field:'title', title:'公告标题',align:'center'}
				,{field:'createtime', title:'发布时间',align:'center'}
				,{field:'opername', title:'发布人',align:'center'}
				,{fixed: 'right', title:'操作', toolbar: '#noticeTableRowBar',align:'center'}
			] ]
			,page: true
		});
		//模糊查询
		$("#doSearch").click(function(){
			var params=$("#searchFrm").serialize();
			tableIns.reload({
				url:'/notice/getNoticeList?'+params,
				page:{
					curr:1
				}
			})
		});
		//监听表头按钮的事件
		$(".childrenBody").on("click",".ToolBar",function(){
		// $(".ToolBar").click(function(){
			var event = $(this).attr("rel");
			switch(event){
				case 'add':
					$('.subType').val("add")
					openAddLayer();
					break;
				case 'batchdel':
					batchDelete();
					break;
			};
		});

		//监听行按钮的事件
		table.on('tool(noticeTable)', function(obj){
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			if(layEvent === 'update'){ //修改
				openUpdateLayer(data,data.id);
			} else if(layEvent === 'del'){ //删除
				layer.confirm('真的删除行么', function(index){
					//obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					layer.close(index);
					//向服务端发送删除指令
					$.post("/notice/delNotice",{id:data.id},function(obj){
						if(obj.code==200){
							tableIns.reload();//重载表格
						}
						layer.msg(obj.msg);
					})
				});
			} else if(layEvent === 'view'){ //查看
				viewNotice(data);
			}
		});

		var mainIndex;
		var url;
		//打开添加的弹出层
		function openAddLayer(){
			mainIndex=layer.open({
				type: 1,
				title:'发布公告',
				skin: 'layui-layer-molv', //加上边框
				area: ['800px', '600px'], //宽高
				content: $("#saveOrUpdateDiv"),
				success:function(index){
					url="/notice/addNotice";
					$("#dataFrm")[0].reset();
					//清空富文本里面的内容
					layedit.setContent(editIndex,"");
				}

			})
		};
		//打开修改的弹出层
		function openUpdateLayer(data,id){
			mainIndex=layer.open({
				type: 1,
				title:'修改公告',
				skin: 'layui-layer-molv', //加上边框
				area: ['800px', '600px'], //宽高
				content: $("#saveOrUpdateDiv"),
				success:function(index){
					url="/notice/getNoticeInfo?id="+id;
					$.get(url, function (rel) {
						var title = rel.data.title;
						var content = rel.data.content;
						$(".formtitle").val(title);
						$("input[name=id]").val(rel.data.id)
						$(".subType").val("save")
						layedit.setContent(editIndex, data.content)
					}, 'json');
				}

			})
		};

		//监听提交按钮的事件
		form.on("submit(doSubmit)",function(data){
			layedit.sync(editIndex);
			var params=$("#dataFrm").serialize();
			console.log(params);
			//提交 数据
			var subType = $('.subType').val()
			if(subType == "save"){
				$.post("/notice/saveNotice",params,function(obj){
					if(obj.code==200){
						tableIns.reload();//重载表格
					}
					layer.msg(obj.msg);
					layer.close(mainIndex);
				})
			}else{
				$.post("/notice/addNotice",params,function(obj){
					if(obj.code==200){
						tableIns.reload();//重载表格
					}
					layer.msg(obj.msg);
					layer.close(mainIndex);
				})
			}
			return false;//阻止同步提交
		});

		//批量删除
		function batchDelete(){
			var checkStatus = table.checkStatus('noticeTable'); //idTest 即为基础参数 id 对应的值
			console.log(checkStatus.data) //获取选中行的数据
			console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
			console.log(checkStatus.isAll ) //表格是否全选
			if(checkStatus.data.length==0){
				layer.msg("请选中要删除的数据行");
			}else{
				layer.confirm('真的删除选中行么?', function(index){
					layer.close(index);
					var params="";
					$.each(checkStatus.data,function(i,item){
						if(i==0){
							params+="ids="+item.id;
						}else{
							params+="&ids="+item.id;
						}
					});
					//向服务端发送删除指令
					$.post("/notice/batchDeleteNotice",params,function(obj){
						if(obj.code==200){
							tableIns.reload();//重载表格
						}
						layer.msg(obj.msg);
					})
				});
			}
		}

		//查看
		function viewNotice(data){
			mainIndex=layer.open({
				type: 1,
				title:'查看公告',
				skin: 'layui-layer-molv', //加上边框
				area: ['800px', '500px'], //宽高
				content: $("#viewNoticeDiv"),
				success:function(index){
					$("#view_title").html(data.title);
					$("#view_opername").html(data.opername);
					$("#view_createtime").html(data.createtime);
					$("#view_content").html(data.content);
				}
			})
		}

	});
</script>

</body>
</html>